<template>
  <div
    class="chart-border"
    :style="{
      width: width + 'px',
      height: height + 'px',
      position: 'relative',
      overflow: 'hidden'
    }"
  >
    <!-- 颜色边框模式 -->
    <div
      v-if="borderType === 'color'"
      class="border-bg"
      :style="{
        backgroundColor: borderColor,
        padding: borderWidth + 'px',
        width: '100%',
        height: '100%'
      }"
    >
      <div
        class="border-content"
        :style="{
          backgroundColor: contentBg,
          width: '100%',
          height: '100%'
        }"
      >
        <slot></slot>
      </div>
    </div>

    <!-- 图片边框模式（✅ 修复版：使用 background-image） -->
    <template v-else-if="borderType === 'image'">
      <!-- 边框背景图（拉伸填满） -->
      <div
        class="border-image-bg"
        :style="{
          backgroundImage: borderImage ? `url(${borderImage})` : 'none',
          backgroundSize: '100% 100%',
          backgroundRepeat: 'no-repeat',
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          pointerEvents: 'none' /* 防止遮挡内容交互 */
        }"
      ></div>

      <!-- 内容区域（绝对定位，受 padding 控制） -->
      <div
        class="border-content"
        :style="{
          position: 'absolute',
          top: paddingValues.top + 'px',
          right: paddingValues.right + 'px',
          bottom: paddingValues.bottom + 'px',
          left: paddingValues.left + 'px',
          overflow: 'hidden'
        }"
      >
        <slot></slot>
      </div>
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 容器尺寸（单位：px）
  width: {
    type: Number,
    default: 400
  },
  height: {
    type: Number,
    default: 300
  },

  // 边框类型：'image' 或 'color'
  borderType: {
    type: String,
    default: 'image',
    validator: (value) => ['image', 'color'].includes(value)
  },

  // 图片边框
  borderImage: {
    type: String,
    default: ''
  },

  // 颜色边框相关
  borderColor: {
    type: String,
    default: '#1890ff'
  },
  contentBg: {
    type: String,
    default: '#0a0f25'
  },
  borderWidth: {
    type: Number,
    default: 2
  },

  // 内边距：支持 number | [top, right, bottom, left]
  padding: {
    type: [Number, Array],
    default: () => [20, 20, 20, 20],
    validator(value) {
      if (typeof value === 'number') return true
      if (Array.isArray(value)) {
        return (
          value.length >= 1 &&
          value.length <= 4 &&
          value.every((v) => typeof v === 'number')
        )
      }
      return false
    }
  }
})

// 计算 padding 的四个方向值
const paddingValues = computed(() => {
  const p = props.padding
  if (typeof p === 'number') {
    return { top: p, right: p, bottom: p, left: p }
  }
  if (Array.isArray(p)) {
    const [top, right = top, bottom = top, left = right] = p
    return { top, right, bottom, left }
  }
  return { top: 20, right: 20, bottom: 20, left: 20 }
})
</script>

<style scoped>
.chart-border {
  /* 由 :style 控制宽高，此处不设 */
}

.border-bg,
.border-content {
  box-sizing: border-box;
}
</style>
